<!--
 * @author: Spring
 * @create: 2021-06-19 13:57 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-05 14:40 PM
 * @desc: 
-->
<template>
  <div
    class="container"
    style="backgroundcolor: rgba(0, 0, 0, 0.2)"
    v-if="$store.state.showlogin"
  >
    <div class="loginbox">
      <img
        :style="{ top: img == '/img/focus.svg' ? '-75px' : '-77px' }"
        :src="img"
        alt=""
      />
      <div class="text">
        <div class="text_way">
          {{ !beRegistering ? "登录账号" : "注册账号" }}
        </div>
        <div
          class="el-icon-close close"
          @click="$store.commit('notshowLogin')"
        ></div>
      </div>
      <div class="from">
        <el-input
          ref="input"
          class="input"
          @focus="img = '/img/focus.svg'"
          @blur="img = '/img/notFocus.svg'"
          placeholder="邮箱/手机号（国际号码加区号）"
          v-model="account"
          clearable
        >
        </el-input>
        <el-input
          class="input"
          placeholder="请输入密码"
          v-model="password"
          show-password
        ></el-input>
        <el-input
          class="input"
          placeholder="请再次输入密码"
          v-model="passwordtwo"
          show-password
          v-show="beRegistering"
        ></el-input>
      </div>
      <div class="login" @click="register">
        {{ beRegistering ? "注册" : "登录" }}
      </div>
      <div class="choose">
        <div class="choose_way" @click="changeLoginWay">
          {{ beRegistering ? "登录账号" : "注册账号" }}
        </div>
        <div class="choose_forget" v-show="!beRegistering">忘记密码</div>
      </div>
      <div class="otherLogin" v-show="!beRegistering">
        <div class="circle" v-for="item in icon" :key="item.title">
          <img :src="item.src" :alt="item.alt" :title="item.title" />
        </div>
      </div>
      <div class="explain">
        注册登录即表示同意<span>用户协议</span><span>、</span
        ><span>隐私政策</span>
      </div>
    </div>
  </div>
</template>

<script>
import { register, login } from "/utils/api.js";
export default {
  inject: ["reload"],
  name: "Login",
  data() {
    return {
      show: true,
      //当前状态true为正在注册
      beRegistering: false,
      //最上面图片路径
      img: "/img/focus.svg",
      //账号密码
      account: "",
      password: "",
      passwordtwo: "",
      //图标
      icon: [
        { title: "微博", alt: "微博", src: "/img/svg/weibo.svg" },
        { title: "微信", alt: "微信", src: "/img/svg/wechat.svg" },
        { title: "github", alt: "github", src: "/img/svg/github.svg" },
      ],
    };
  },
  components: {},
  mounted() {
    if (this.$store.showlogin) {
      this.$refs.input.focus();
    }
  },
  methods: {
    //切换登录注册界面
    changeLoginWay() {
      this.account = "";
      this.password = "";
      this.passwordtwo = "";
      this.beRegistering = !this.beRegistering;
    },
    //登录注册
    register() {
      let name = this.account;
      let pw = this.password;
      if (!this.beRegistering) {
        login({ name, pw }).then(res=>{
          console.log(res.data);
          localStorage.setItem('token',res.data.token)
          localStorage.setItem('info',JSON.stringify(res.data))
          window.location.reload();
          console.log(123);
          if(!res.data.icon){
            res.data.icon='https://sf1-ttcdn-tos.pstatp.com/img/mosaic-legacy/3795/3033762272~300x300.image'
          }
        });
      } else {
        if (this.password != this.passwordtwo) {
          this.$message("两次输入的密码不一致", "error");
          return;
        }
        register({ name, pw }).then((res) => {
          if (res.code == 2000) {
            this.changeLoginWay();
            this.$message("注册成功");
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: rgba(0, 0, 0, 0.2);
  @include flex(center, center);
  @include position(fixed, 0, 0, none, none, 100vw, 100vh);
  overflow: hidden;
  z-index: 9999;
}
.loginbox {
  width: 318px;
  height: 367px;
  box-sizing: border-box;
  padding: 24px;
  background-color: #fff;
  border-radius: 2px;
  position: relative;
  > img {
    @include position(absolute, -77px, none, none, 50%, 120px, auto);
    transform: translate(-50%);
  }
  .text {
    @include flex(space-between, flex-start);
    @include font(18px, #333, bold);
    margin-bottom: 24px;
    .close {
      width: 10.5px;
      height: 10.5px;
      color: #adadad;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .from {
    .input {
      width: 270px;
      height: 40px;
      border-radius: 2px;
      outline: none;
      margin-bottom: 6px;
    }
  }
  .login {
    @include flex(center, center);
    width: 270px;
    height: 40px;
    background-color: #007fff;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
  }
  .choose {
    margin-top: 18px;
    @include flex(space-between, center);
    color: #007fff;
    > div {
      cursor: pointer;
    }
  }
  .otherLogin {
    width: 100%;
    margin-top: 15px;
    @include flex(space-between, center);
    .circle {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: #f4f8fb;
      cursor: pointer;
      @include flex(center, center);
      img {
        width: 23px;
        height: 23px;
      }
    }
  }
  .explain {
    margin-top: 20px;
    @include font(14px, #767676);
    span {
      color: #007fff;
    }
  }
}
</style>
